<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    

    <script>
        
        // function wh2107(data){
        //     console.log(data)
        // }

        // 如何封装jsonp 
        // 1. 动态的创建一个 script => 放到页面内  拼接一个回调函数 
        // var jdsrc = "https://floor.jd.com/user-v20/feed/get?page=2&pagesize=25&area=1_72_55653_0&source=pc-home&callback=wh2107&_=1624690491233"
        // var script = document.createElement("script");
        // script.src = jdsrc;

        // document.body.appendChild(script);
        
        // // script 等待加载完毕再去执行  这个函数 
        // // onload (window img link script )
        // script.onload = function(){
        //     console.log("JSonp 加载完毕")
        //     script.remove()
        // }
            
        var jdsrc = "https://floor.jd.com/user-v20/feed/get";
        jsonp(jdsrc,{
            page:1,
            pagesize:25,
            area:"1_72_55653_0",
            source:"pc-home",
        },"callback","getdata")
        
        // jsonp key
        // jsonpcallback  value 函数名称 

        // 
        function jsonp(url,data="",jsonp="callback",jsonpcallback="fn"){
            // 1. 动态的创建一个 script => 放到页面内 
            var script = document.createElement("script");
            if(data instanceof Object){    // 如果参数数据是对象  就需要把对象拼接成字符串 
                var str = "";
                for(var key in data){
                    str += key+"="+data[key] + "&";
                }
                data = str.substring(0,str.length-1);
            }

            // jsonpcallback 不是变量
            // function jsonpcallback(){

            // }
            
            // 得到JSONP 接口的结果 
            window[jsonpcallback] = function(result){
                console.log("请求成功",result)
            }   

            
            script.src = `${url}?${data}&${jsonp}=${jsonpcallback}`;

            document.body.appendChild(script);
            script.onload = function(){
                console.log("JSonp 加载完毕")
                script.remove()
            }
        }
    </script>
</body>
</html>